
import React from 'react';
import './App.css';
import ListTodo from './Component/List/index';
import HeaderTodo from './Component/Header/index';

import Footer from './Component/Footer';
class App extends React.Component{
 state={
  todos:[
   {id:1,name:'吃饭',done:true},
   {id:2,name:'睡觉',done:false},
   {id:3,name:'打豆豆',done:true},
   {id:4,name:'刷牙',done:true},
   {id:5,name:'洗脸',done:false}
  ]
 }
//增
addTodo=(arr)=>{
const{todos}=this.state;
let newTodo= [...todos,arr]
 this.setState({
  todos:newTodo
 })
}
//删
deleteTodo=(id)=>{
const{todos}=this.state;
let newTodo=todos.filter((item)=>{
  return item.id!==id

})
this.setState({
  todos:newTodo
})
}
//修改
changeTodo=(id,name)=>{
const{todos}=this.state;
 let newTodo=todos.map((item)=>{
     if(item.id===id){
    return {...item,name:name}
     }
        return item
 })
this.setState({
  todos:newTodo
})
}
//input框选中or不选中
updateTodo=(id,e)=>{
 const{todos}=this.state;
 let newTodo= todos.map((item)=>{
    if(item.id===id){
      return {...item,done:e}
    }
 return item
 })

this.setState({
  todos:newTodo
})
}
//全选or反选

handleCheck=(e)=>{
const{todos}=this.state;
let newTodo=todos.map((item)=>{

  return {...item,done:e}

})
this.setState({
  todos:newTodo
})
}

//清除已完成
clearContent=()=>{
 const{todos}=this.state;
 let newTodo= todos.filter((item)=>{
  return item.done!==true
 })
 this.setState({
  todos:newTodo
 })
}

  render(){
 const{todos}=this.state;
  return(
     <div className='todo-container'>
      <div className='todo-wrap'>
      <HeaderTodo  addTodo={this.addTodo}/> 
        <ListTodo  todos={todos} deleteTodo={this.deleteTodo} 
        changeTodo={this.changeTodo}
        updateTodo={this.updateTodo}
        
        />
        
       <Footer  todos={todos} handleCheck={this.handleCheck} clearContent={this.clearContent}/>
      </div>
     </div>
  )
  }

}
export default App;
